<template>
  <div class="box">
    <ul>
      <li v-for="item in jingdian" :key="item.id">
        <img :src="item.img" />
        <div class="text">
          <span class="move_name">
            {{ item.nm }}
          </span>
          <p>
            <span class="pinf pinf1">{{ item.enm }}</span>
          </p>
          <p class="pinf pinf1">
            {{ item.cat }}
          </p>
          <p class="pinf pinf1">
            {{ item.pubDesc }}
          </p>
        </div>
        <div>
          <span class="sc">{{ item.sc }}</span>
          <span class="fen">分</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//引入axios
import axios from "axios";
export default {
  name: "jingdian",
  data() {
    return {
      jingdian: [], //电影数据
    };
  },
  mounted() {
    //使用axios获取数据
    axios
      .get(
        "/ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=10&optimus_uuid=86B91630533D11EC8849DD729AB9E91ABAED98CE0B6E4278B4EAB3B99FA8E8FA&optimus_risk_level=71&optimus_code=10"
      )
      .then((rel) => {
        console.log(rel.data.classicMovies.list);
        this.jingdian = rel.data.classicMovies.list;
        console.log(this.jingdian);
      });
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-around;
  background: #fff;
}

.box ul {
  width: 90%;
  margin-top: 0.13333333333333333rem;
}

.box ul li {
  width: 100%;
  display: flex;
  font-size: 0.37333333333333335rem;
  color: #666;
  padding: 0.26666666666666666rem 0;
}

.box img {
  width: 1.76rem;
  height: 2.506666666666667rem;
}

.text {
  margin-left: 0.26666666666666666rem;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.text .pinf {
  margin-top: 5px;
}

.move_name {
  display: block;
  font-size: 17px;
  line-height: 0.48rem;
  color: #333;
  font-weight: bold;
  padding-bottom:5px;
}
.sc {
  font-size: 14px;
  color: #faaf00;
  font-weight: bold;
  padding-top: 5px;
}
.fen {
  font-weight: bold;
  color: #999;
  font-size: 0.32rem;
}
</style>